<template>
  <div class="layout-col flex1 bs">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">设备告警数量统计</span>
      </div>
    </div>
    <!-- 左上 -->
    <div class="ww100 flex1" id="Pie1"></div>
  </div>
</template>

<script lang="ts" setup>
	import ec from '@/utils/chart'
	const { drawChart } = ec()
	const { proxy }:any = getCurrentInstance()
	const publicStore = proxy.publicStore()
	const state = reactive({
	  ...publicStore.$state,
	})
	
	watch(() => publicStore._public.DD, async(val) => {
	  if(proxy.isNull(val)) return
	  await nextTick()
	  setChart()
	},{immediate: false, deep: true})
	
	const setChart = async() => {
	  drawChart('Pie','Pie1', '', publicStore._public.DD)
	}
</script>

<style scoped lang="scss">

</style>
